import React, { useState } from 'react'
import './GoodsImage.css';

//声明一个数组  快速复制一行的快捷键 alt + shift + ↓
let arr = [
  '/goods/1.jpg',
  '/goods/2.jpg',
  '/goods/3.jpg',
  '/goods/4.jpg',
  '/goods/5.jpg',
];

export default function GoodsImage() {
  //定义状态
  let [index, setIndex] = useState(0);

  return (
    <div className='goods-image'>
      <div className="big-image">
        <img src={arr[index]} alt="" />
      </div>
      <div className="small-images">
        {
          arr.map((item, ind) => <div key={ind} className="item" onClick={() => {
            //更新 index 的状态
            setIndex(ind);
          }}>
            <img className={ind === index ? "active" : undefined} src={item} alt='' />
            </div>)
        }
      </div>
    </div>
  )
}
